<template>
  <Container>
    <div class="order-detail">
        <Tabs name="name">
          <TabPane :label="title" name="tab1">
            <!-- 上 -->
            <Row>
              <Col span="8" class="left-col">
                <Card class="card" :bordered="false">
                  <Form :label-width="100" ref="form" :rules="rule" :model="form">
                    <Tabs  size="small" v-modal="value">
                        <TabPane tab="name1" name="tg1" label="设计图">
                          <DesignItem :type="type" :userInfo="userInfo" ref="Design"></DesignItem>
                        </TabPane>
                        <TabPane tab="name1" name="tg2" label="成衣款式图" >
                          <ReadyWearItem :type="type" ref="ReadyWear" :userInfo="userInfo"></ReadyWearItem>
                        </TabPane>
                        <TabPane tab="name1" name="tg3" label="工艺图" >
                          <ProcessItem :type="type" ref="Process" :userInfo="userInfo"></ProcessItem>
                        </TabPane>
                        <TabPane tab="name1" name="tg4" label="版型图" >
                          <TypographyItem :type="type" ref="Typography" :userInfo="userInfo"></TypographyItem>
                        </TabPane>
                        <TabPane tab="name1" name="tg5" label="打版文件" >
                          <TypesettingItem :type="type" ref="Typesetting" :userInfo="userInfo"></TypesettingItem>
                        </TabPane>
                        <TabPane tab="name1" name="tg6" label="其他文件" >
                          <OtherItem :type="type" ref="Other" :userInfo="userInfo"></OtherItem>
                        </TabPane>
                    </Tabs>
                  </Form>
                </Card>
                </Col>
                <Col span="16" class="right-col">
                  <Card class="card mt" :bordered="false">
                    <p slot="title">数据库表单</p>
                    <Row>
                      <Col span="12">                      
                        <Form :label-width="100"  ref="form" :rules="rule" :model="form">
                          <FormItem label="编号：" >
                            <Input v-model="form.number" :disabled="type == 'look'"  placeholder="编号"></Input>
                          </FormItem>
                          <FormItem label="年份：" >
                            <DatePicker type="year" :disabled="type == 'look'" placeholder="年份" v-model="form.decade"></DatePicker>
                          </FormItem>
                          <FormItem label="季节：">
                            <Select v-model="form.season" :disabled="type == 'look'" >
                              <Option v-for="(item, index) of jijie"  :key="index" :value="item.id">{{item.name}}</Option>
                            </Select>
                          </FormItem>
                          <FormItem label="制版师：" >
                            <Input v-model="form.zb_name" :disabled="type == 'look'"  placeholder="制版师"></Input>
                          </FormItem>
                        </Form>
                      </Col>
                      <Col span="12">                      
                        <Form :label-width="100" ref="form" :rules="rule" :model="form">
                          <FormItem label="性别：" >
                            <Select v-model="form.sex_name" :disabled="type == 'look'" >
                                <Option v-for="(item, index) of sexList" :key="index" :value="item.id">{{item.label}}</Option>
                            </Select>
                          </FormItem>
                          <FormItem label="品类：">
                            <Input v-model="form.category" :disabled="type == 'look'" placeholder="品类"></Input>
                          </FormItem>
                          <FormItem label="款式属性: ">
                            <Cascader transfer :disabled="type == 'look'" :data="list" v-model="form.style" :load-data="loadData"></Cascader>
                          </FormItem>
                          <!-- <FormItem label="款式属性：">
                            <Input v-model="form.style" :disabled="type == 'look'" placeholder="款式属性"></Input>
                          </FormItem> -->
                          <FormItem label="日期：">
                            <DatePicker type="date" :disabled="type == 'look'" placeholder="日期" v-model="form.write_date"></DatePicker>
                          </FormItem>
                        </Form>
                      </Col>
                    </Row>
                  </Card>
                  <Card class="card mt" :bordered="false">
                    <p slot="title">特征码标签</p>
                    <a href="#" v-if="type !== 'look'" slot="extra" @click.prevent="changeLimit">
                        <Icon type="ios-loop-strong"></Icon>
                        特征码标签编辑
                    </a>
                    <Row>
                      <Col span="12">    
                                        
                        <Form :label-width="100" ref="form" :rules="rule" :model="form">
                          <FormItem v-for="(item, index) of view_code" :key="index" :label="item.name" v-show="item.te_code.length">
                              <span >{{item.allname}}  </span>  
                          </FormItem>
                        </Form>
                      </Col>
                    </Row>
                  </Card>
                </Col>
            </Row>
            <!-- 下 -->
            <Row>
              <Col span="24" class="table-col">
                <div class="disable-shadow" v-if=" type == 'look'"></div>
                <Card :bordered="false">
                  <p slot="title">款式物料清单</p>
                  <one ref="one" :user_type="user_type" :oneList="list"></one>
                </Card>
              </Col>
            </Row>
            <Row>
              <Col span="24" class="table-col">
              <div class="disable-shadow" v-if=" type == 'look'"></div>
                <Card :bordered="false">
                  <p slot="title">款式尺寸表</p>
                  <two ref="two" :user_type="user_type"  :oneList="list"></two>
                </Card>
              </Col>
            </Row>
            <Row>
              <Col span="24"  class="table-col">
               <div class="disable-shadow" v-if=" type == 'look'"></div>
                <Card :bordered="false">
                  <p slot="title">款式工艺单</p>
                  <three ref="three" :user_type="user_type" :oneList="list"></three>
                </Card>
              </Col>
            </Row>
          </TabPane>
        </Tabs>
        <!-- {{userInfo}} -->
    </div>
    <div class="container-footer bg-white" slot="footer">
      <Button type="primary" size="large" class="ml" @click="onPrevertion">返回</Button>
      <Button type="primary" size="large" class="ml" :disabled="version_num !== 'undefined'" @click="onSave">提交</Button>
      <!-- <Button type="primary" size="large" class="ml" :disabled="version_num !== 'undefined'" @click="onSaveCao">保存草稿</Button> -->
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
    <TeCodeItem ref="tecode" @complete="setViewCode" ></TeCodeItem>
    <!-- <ProcessItem ref="process"></ProcessItem> -->
  </Container>
</template>
<script>
const phoneValid = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$|^0\d{2,3}-?\d{7,8}$/.test(value))) {
    callback(new Error('请输入正确格式的电话号码'))
  } else {
    callback()
  }
}
import PictureEditItem from "@/components/PictureEditItem"
import TeCodeItem from './edit/TeCodeItem'
import DesignItem from './edit/DesignItem'
import ReadyWearItem from './edit/ReadyWearItem'
import ProcessItem from './edit/ProcessItem'
import TypographyItem from './edit/TypographyItem'
import TypesettingItem from './edit/TypesettingItem'
import OtherItem from './edit/OtherItem'
import two from './edit/two'
import one from './edit/one'
import three from './edit/three'
import { mapGetters } from 'vuex'
import { formatDate } from '@/util'
export default {
  components: {
    PictureEditItem,
    TeCodeItem,
    DesignItem,
    ReadyWearItem,
    ProcessItem,
    TypographyItem,
    TypesettingItem,
    OtherItem,
    one,
    two,
    three
  },
  data() {
    return {
      form: {
        number: '',
        sex_name: '', 
        decade: '', 
        category: '',
        season: '',
        style: '', 
        zb_name: '',
        write_date: '',
        te_code: []
      },
      zform: {
        kuanshi_attr: '',
        base_size: '',
        platemaking_name: '',
        remark: '',
      },
      order_detail: {},
      rule: {
        title: [{required: true, message: '请输入标题', trigger: 'blur'}],
        phone: [{required: true, validator: phoneValid,  trigger: 'blur'}],
        imgPath: [{ required: true, message: "请上传头像", trigger: "blur" }],
      },
      uploadList: [],
      status: 'pass',
      list: [{
        value: '1',
        label: '男装',
        children: [],
        loading: false
      }, {
        value: '2',
        label: "女装",
        children: [],
        loading: false
      }, {
        value: '3',
        label: '童装',
        children: [],
        loading: false
      }],
      sexList: [{
        label: '男',
        id: 1
      }, {
        label: '女',
        id: 2
      }, {
        label: '儿童',
        id: 3
      }],
      jijie: [],
      boduan: [],
      te_code:[],
      view_code: {},
      value: 'Windows',
      oneList: [],
      twoList: [],
      threeList: [],
      version_num: this.$route.query.version_num || 'undefined',
      type: this.$route.query.type || ''
    }
  },
  mounted() {
    this.getPyList()
    // this.getData()
    if (this.$route.query.id) this.getdistributionField()
  },
  methods: {
    loadData(item, callback) {
      item.loading = true
      console.log(item)
      this.$ajaxGet(`/order/styleList?style_type=${item.value}`).then(data => {
        item.loading = false
        let child = item.children = data.map((item, index) => {
          return {
            value: item,
            label: item
          }
        })
        this.$set(item, 'children', child)
        callback()
      })
    },
    saveBody(url) {
      this.form.te_code = this.$refs.tecode.setList.map(item=> {
        return {
          te_code: item.te_code,
          name: item.name,
        }
      })
      const param = {
        file: {
          2: {
            file_type: 2,
            list: this.$refs.Design.form.imgPath,
          },
          3: {
            file_type: 3,
            list: this.$refs.ReadyWear.form.imgPath,
          },
          4: {
            file_type: 4,
            list: this.$refs.Process.form.imgPath,
          },
          5: {
            file_type: 5,
            list: this.$refs.Typography.form.imgPath, 
          },
          1: {
            file_type: 1,
            list: this.$refs.Typesetting.form.imgPath, 
          },
          0: {
            file_type: 0,
            list: this.$refs.Other.form.imgPath
          }
        },
        form: {
          store_order: this.form
        },
        table: {
          design: this.$refs.one.viewData,
          zb: this.$refs.two.viewData,
          zy: this.$refs.three.viewData
        },
        store_order_id: this.$route.query.id
      }
      param.form.store_order.write_date = formatDate(this.form.write_date, true)
      param.form.store_order.decade= formatDate(this.form.decade, true)
      // param.form.zb.upload_time = formatDate(this.form.upload_time, true)
      console.log(param)
      this.status = 'loading'
      this.$jsonPost(url, param).then(res => {
        this.status = 'pass'
          this.$Notice.success({
            title: '操作成功'
          })
          this.$router.back()
      }).catch(res => {
        this.status = 'pass'
      })
    },
    onSaveCao() {
      let url = '/store/createStore'
      this.saveBody(url)
    },
    onSave() {
      let url = '/store/createStore'
      if (this.$route.query.id) url = '/store/saveDetail'
      this.saveBody(url)
    },
    setViewCode(data) {
      this.view_code = data
    },
    changeLimit() {
      this.$refs.tecode.openModal()
    },
    getdistributionField() {
      const param = {
        store_order_id: this.$route.query.id,
      }
      if (this.version_num) param.version_num = this.version_num

      this.$ajaxGet(`/store/getdistributionField`, param).then(res => {
        let one = res.filter(item => item.type == 1)
        if(one.length) {
          this.oneList = one[0].filed_list.map(todo => {
            return {
              field_name: todo.field_name,
              field_name_py: `${todo.field_name_py}`
            }
          })
          this.$refs.one.init(this.oneList, this.user_type)
        }
        let two = res.filter(item => item.type == 2)
        if (two.length) {
          this.twoList =  two[0].filed_list.map(todo => {
            return {
              field_name: todo.field_name,
              field_name_py: `${todo.field_name_py}`
            }
          })
          this.$refs.two.init(this.twoList, this.user_type)
        }
        let three = res.filter(item => item.type == 3)
        if (three.length) {
          this.threeList =  three[0].filed_list.map(todo => {
            return {
              field_name: todo.field_name,
              field_name_py: `${todo.field_name_py}`
            }
          })
          this.$refs.three.init(this.threeList, this.user_type)
        }
       this.getBig()
      })
    },
    getPyList() {
      // 季节
      this.$ajaxGet('/system/pyList', {type: 'jijie'}).then(res => {
        this.jijie = res.map(item => {
          return {
            id: item.id,
            name: item.name
          }
        })
      })
    },
    getBig() {
      this.status = 'loading'
      const param = {
        store_order_id: this.$route.query.id,
      }
      if (this.version_num) param.version_num = this.version_num
      this.$ajaxGet(`/store/getDetail`, param).then(res => {
        res.file[2] && this.$refs.Design.getData(res.file[2].list)
        res.file[3] && this.$refs.ReadyWear.getData(res.file[3].list)
        res.file[4] && this.$refs.Process.getData(res.file[4].list)
        res.file[5] && this.$refs.Typography.getData(res.file[5].list)
        res.file[1] && this.$refs.Typesetting.getData(res.file[1].list)
        res.file[0] && this.$refs.Other.getData(res.file[0].list)
        this.form = res.form.store_order || {}
        // 款式文件
        if (res.table.design ) {
          if (res.table.design instanceof Array && res.table.design.length == 0) {
            if (JSON.stringify(this.$refs.one.target) !== "{}") this.$refs.one.viewData = [JSON.parse(JSON.stringify(this.$refs.one.target))]
          } else {
            this.$refs.one.viewData = res.table.design
          }
        } else {
          if (this.oneList.length) {
            this.$refs.one.viewData = [JSON.parse(JSON.stringify(this.$refs.one.target))]
          } else {
             this.$refs.one.viewData = []
          }
        }
        if (res.table.zb) {
          // debugger
          if (res.table.zb instanceof Array && res.table.zb.length == 0) {
            if (JSON.stringify(this.$refs.two.target) !== "{}") this.$refs.two.viewData = [JSON.parse(JSON.stringify(this.$refs.two.target))]
          } else {
            this.$refs.two.viewData = res.table.zb
          }
        } else {
          if (this.twoList.length) {
            this.$refs.two.viewData = [JSON.parse(JSON.stringify(this.$refs.two.target))]
          } else {
            this.$refs.two.viewData = []
          }
        }
        if (res.table.zy) {
          if (res.table.zy instanceof Array && res.table.zy.length == 0) {
             if (JSON.stringify(this.$refs.three.target) !== "{}")  this.$refs.three.viewData = [JSON.parse(JSON.stringify(this.$refs.three.target))]
          } else {
            this.$refs.three.viewData = res.table.zy
          }
        } else {
          if (this.threeList.length) {
            if(this.$refs.three.target)  this.$refs.three.viewData = [JSON.parse(JSON.stringify(this.$refs.three.target))]
          } else {
            this.$refs.three.viewData = []
          }
        }
        // 特征吗
        this.$refs.tecode.setData((res.form.store_order && res.form.store_order.te_code) || [])
        this.order_detail = res.order_detail
        this.status = 'pass'
      })
    },
    getData() {
      this.$ajaxGet(`/order/orderDetail?order_id=${this.$route.query.id}`).then(data => {
        let is_sample_dress = (data.order.is_sample_dress) == 0 ? "无" : "有"
        let need_type = (data.order.need_type ) == 0 ? "制版" : "制板+样衣"
        let res = data.order
        let form = {
          title: res.title,
          is_sample_dress: is_sample_dress,
          parameter: res.parameter,
          images: res.images,
          claims: res.claims,
          user_type: res.user_type,
          sure_finish: res.sure_finish,
          type: res.type,
          control_service: res.control_service,
          need_type: need_type
        }
        this.formInfo = form
      })
    },
    onPrevertion() {
      this.$router.back()
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    companyList() {
      return this.form.companyList.map(item => item.company_name).join(',')
    },
    user_type() {
      return this.userInfo.user_type
    },
    title() {
      let text = '录入数据库'
      if (this.$route.query.type == 'edit') text = '编辑数据库'
      if (this.$route.query.type == 'look') text = '数据库详情'
      return text
    }
  }
}
</script>